<template>
  <div class="cpn">
    <h1 style="margin-left: 210px">个人中心</h1>
    <el-form class="form" v-if="!flag2" ref="modelForm" :model="modelForm">
      <el-form-item label="员工编号：" :label-width="formLabelWidth" align="left" prop="empno">
        <span>{{modelForm.empno}}</span>
      </el-form-item>
      <el-form-item label="账号：" :label-width="formLabelWidth" align="left" prop="account">
        <span>{{modelForm.account}}</span>
      </el-form-item>
      <el-form-item label="员工姓名：" :label-width="formLabelWidth" align="left" prop="ename">
        <el-input v-if="flag1" v-model="modelForm.ename" :style="style"></el-input>
        <span v-else>{{modelForm.ename}}</span>
      </el-form-item>
      <el-form-item label="性别：" :label-width="formLabelWidth" align="left" prop="sex" >
        <span>{{modelForm.sex}}</span>
      </el-form-item>
      <el-form-item label="部门：" :label-width="formLabelWidth" align="left" prop="deptno">
        <span>{{modelForm.deptno}}</span>
      </el-form-item>
      <el-form-item label="职业：" :label-width="formLabelWidth" align="left" prop="job">
        <span>{{modelForm.job}}</span>
      </el-form-item>
      <el-form-item label="头像：" :label-width="formLabelWidth" align="left" prop="headshot">
        <!---->
        <el-input v-model="modelForm.headshot" :style="style"></el-input>
      </el-form-item>
      <el-form-item label="联系电话：" :label-width="formLabelWidth" align="left" prop="tel">
        <el-input v-if="flag1" v-model="modelForm.tel" :style="style"></el-input>
        <span v-else>{{modelForm.tel}}</span>
      </el-form-item>
      <el-form-item style="margin-left: 180px" v-if="flag1">
        <el-button type="primary" @click="editMsg">修改</el-button>
        <el-button @click="flag1=false">取消</el-button>
      </el-form-item>
    </el-form>
    <el-form v-else ref="pwdForm" :model="pwdForm" label-width="80px">
      <el-form-item show-password label="原密码：" :label-width="labelWidth">
        <el-input v-model="pwdForm.oldPwd" autocomplete="off" :style="style"></el-input>
      </el-form-item>
      <el-form-item show-password label="新密码：" :label-width="labelWidth">
        <el-input v-model="pwdForm.newPwd" autocomplete="off" :style="style"></el-input>
      </el-form-item>
      <el-form-item show-password label="确认密码：" :label-width="labelWidth">
        <el-input v-model="pwdForm.newPwd2" autocomplete="off" :style="style"></el-input>
      </el-form-item>
      <el-form-item v-if="flag2" style="margin-left: 110px">
        <el-button type="primary" @click="editPwd">修改</el-button>
        <el-button @click="flag2=false">取消</el-button>
      </el-form-item>
    </el-form>
    <div v-if="!flag1 && !flag2" style="margin-left: 120px">
      <el-button type="primary" style="width: 120px" @click="flag1 = true">修改个人信息</el-button>
      <el-button type="primary" style="width: 120px" @click="flag2 = true">修改密码</el-button>
    </div>
  </div>
</template>

<script>
    export default {
        name: "UCenter.vue",
        data() {
            return {
                modelForm: {
                    empno: null,
                    account: null,
                    ename: "null",
                    sex: null,
                    deptno: null,
                    job: null,
                    headshot: null
                },
                pwdForm: {
                    oldPwd: null,
                    newPwd: null,
                    newPwd2: null
                },
                labelWidth: "150",
                style: {
                    width: "30%"
                },
                //表单中label的宽度
                formLabelWidth: "10%",
                text1: "修改个人信息",
                text2: "修改密码",
                flag1: false,
                flag2: false
            }
        },
        methods: {
            editMsg() {
                console.log('submit!');
            },
            editPwd() {
                console.log('submit!');
            }
        }
    }
</script>

<style scoped>
  .cpn {
    width: 1195px;
    height: 800px;
    background-color: white;
    padding: 20px 50px;
  }
</style>